<template>
  <div>
    <DocHeader :title="title" fromDoc="picc" :diagnosis="true"></DocHeader>
    <div class="docMain">
      <div>
        经外周穿刺中心静脉置管（PICC）是长期输液病人理想的静脉通路选择，一些需要定时住院接受治疗的病人出院可携带该导管回家，出院后在本院门诊进行导管护理。现将PICC置管风险告知如下，以便自我护理。
      </div>
      <div>
        1、PICC导管为医用硅胶导管，非常柔软，故置管的一侧手臂可从事一般的日常工作，家务劳动及部分体育锻炼，但需要避免提过重的物品，不作引体向上，托举哑铃等持重锻炼。
      </div>
      <div>2、置管一侧手臂避免测血压及作静脉穿刺。</div>
      <div>
        3、保持穿刺部位清洁干燥，贴膜紧贴皮肤完好，治疗间歇期每7天到医院进行导管维护。
      </div>
      <div>4、如出现以下症状及体征，请及时到医院就诊处理：</div>
      <div class="flexBox">
        <div class="item">●穿刺点红肿、化脓</div>
        <div class="item">●置管侧手臂麻木、疼痛、烧灼感</div>
      </div>
      <div class="flexBox">
        <div class="item">●穿刺点出血，按压无效</div>
        <div class="item">●置管侧手臂水肿，臂围增加超过2厘米</div>
      </div>
      <div class="flexBox">
        <div class="item">●导管可见回血</div>
        <div class="item">●穿刺点渗液</div>
      </div>
      <div class="flexBox">
        <div class="item">●呼吸困难，或体温升高＞38℃</div>
      </div>
      <div>
        5、如导管断裂或破损，在导管断裂处上方或靠近穿刺点处将导管折起，并用胶布固定，立即到医院进一步处理。
      </div>
      <div>
        6、携导管可以淋浴，但应避免盆浴、泡浴。淋浴前用塑料保鲜膜在置管处缠绕两至三圈，上下边缘用胶布贴紧，淋浴后检查贴膜下有无进水，如有，请及时更换。
      </div>
      <div>
        7、可以使用此导管进行常规的微量泵或输液泵给药，但不应用于高压注射泵推注造影剂。
      </div>
      <div>8、禁止将胶带直接贴于导管上。严禁将导管外露部分再次置入体内。</div>
      <div>9、导管的相关资料</div>
      <div class="flexBox">
        <div class="item">
          置管日期：
          <DateSelection
            v-model="pageData.a1"
            value-format="yyyy-MM-dd HH:mm"
            :simple-op="true"
            :date-picker-show="true"
            :date-show="true"
            :no-clear="true"
            :hasBorder="false"
            :needTimeIcon="false"
            :display-num="!pageData.a1"
            style="padding: 0"
          />
        </div>
        <div class="item">
          导管型号：
          <el-radio-group v-model="pageData.a2">
            <el-radio label="3F"></el-radio>
            <el-radio label="4F"></el-radio>
            <el-radio label="5F"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="flexBox">
        <div class="item">
          置入长度：
          <el-input v-model="pageData.a3" style="width: 100px"></el-input>
          厘米
        </div>
        <div class="item">
          穿刺所选静脉：
          <el-input v-model="pageData.a4" style="width: 200px"></el-input>
        </div>
      </div>
      <div class="flexBox">
        <div class="item">
          导管的尖端位于：
          <el-input v-model="pageData.a5" style="width: 200px"></el-input>
        </div>
        <div class="item">
          置管前臂围（肘上四指）：
          <el-input v-model="pageData.a6" style="width: 100px"></el-input>
          厘米
        </div>
      </div>
      <div>
        胸片检查：
        <el-radio-group v-model="pageData.a7">
          <el-radio label="有"></el-radio>
          <el-radio label="没有"></el-radio>
        </el-radio-group>
      </div>
      <div>10、 本院PICC护理门诊时间：每周一、二、四、五下午。</div>
      <div>我已经接受了上述内容的告知与宣教。</div>

      <div class="flexBox" style="margin-top: 30px">
        <div class="item">
          患者/家属签名：
          <el-input
            v-model="pageData.inputValue1"
            style="width: 100px"
          ></el-input>
        </div>
        <div class="item">
          与患者关系：
          <el-input
            v-model="pageData.inputValue2"
            style="width: 100px"
          ></el-input>
        </div>
        <div class="item">
          日期：
          <DateSelection
            v-model="pageData.time1"
            value-format="yyyy-MM-dd HH:mm"
            :simple-op="true"
            :date-picker-show="true"
            :date-show="true"
            :no-clear="true"
            :hasBorder="false"
            :needTimeIcon="false"
            :display-num="!pageData.time1"
            style="padding: 0"
          />
        </div>
      </div>
      <div class="flexBox" style="margin-top: 30px">
        <div class="item">
          护士签字：
          <img
            v-if="signPhoto(pageData.sign, 'nursingDocument', docType)"
            :src="
              'data:image/png;base64,' +
              signPhoto(pageData.sign, 'nursingDocument', docType)
            "
            alt=""
            style="display: block; max-width: 98%; height: 24px"
            @click="handleSignImgClear('sign')"
          />
          <el-input
            v-else
            v-model="pageData.sign"
            style="width: 100px"
            @blur="handleSignInputBlur('sign')"
          ></el-input>
        </div>
        <div class="item"></div>
        <div class="item">
          日期：
          <DateSelection
            v-model="pageData.time2"
            value-format="yyyy-MM-dd HH:mm"
            :simple-op="true"
            :date-picker-show="true"
            :date-show="true"
            :no-clear="true"
            :hasBorder="false"
            :needTimeIcon="false"
            :display-num="!pageData.time2"
            style="padding: 0"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    docType: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      pageData: {}
    })

    const baseData = {
      a1: +new Date(),
      a2: '',
      a3: '',
      a4: '',
      a5: '',
      a6: '',
      a7: '',
      inputValue1: '',
      inputValue2: '',
      sign: '',
      time1: +new Date(),
      time2: +new Date()
    }

    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
      } else {
        nextTick(() => {
          const pageData = cloneDeep(baseData)
          pageData.sign = user.value.name
          queryUserSignByName(
            [user.value.name],
            'nursingDocument',
            props.docType
          )
          state.pageData = pageData
        })
      }
    }

    function getParams() {
      return state.pageData
    }

    function handleSignInputBlur(key) {
      queryUserSignByName(
        [state.pageData[key]],
        'nursingDocument',
        props.docType
      )
    }

    function handleSignImgClear(key) {
      state.pageData[key] = ''
    }

    onMounted(() => {
      initData()
    })

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    return {
      ...toRefs(state),
      signPhoto,
      getParams,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';

.docMain {
  line-height: 2.2em;
  margin-top: 10px;
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;

  .item {
    width: 50%;
    display: flex;
    align-items: center;
  }
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    // border-bottom: 1px solid #000;
    padding: 0 4px;
    color: #000;
  }
}
</style>
